<template lang="pug">
  ModuleWrapper(title="土地及耕地资源概况" flex="1")
    .chart-container
      .chart-wrap(ref="chart")
      .chart-legend
        StaticSimpleView.simple-static(v-for="(item, index) in staticData"
          :label="item.label" :value="item.value"
          :color="colorData[index]")
</template>

<script>
export default {
  name: "ModulePopulation",
  data() {
    return {
      chart: null,
      colorData: ['#1860d0', '#45c761', '#1bd8bb', '#8ad10c', ],
      staticData: [
        {
          label: '高标准农田',
          value: 4.65,
        },
        {
          label: '基本农田',
          value: 22.39,
        },
        {
          label: '耕地',
          value: 25.03,
        },
      ],
      // radiusAxis: ['高标准农田', '基本农田', '耕地'],
      // staticData: [4.65, 22.39, 25.03],
    }
  },
  methods: {
    renderChart() {
      const radiusAxis = [];
      const data = [];
      this.staticData.forEach(item => {
        radiusAxis.push(item.label);
        data.push(item.value);
      });

      this.chart = this.$echarts.init(this.$refs['chart']);
      this.chart.setOption({
        polar: {
          radius: [30, '80%']
        },
        angleAxis: {
          max: 25,
        },
        radiusAxis: {
          type: 'category',
          // data: radiusAxis
        },
        tooltip: {
          formatter: '{b}: {c}万亩'
        },
        series: {
          type: 'bar',
          data: data,
          coordinateSystem: 'polar',
          label: {
            show: false,
            position: 'middle',
            formatter: '{b}: {c}万亩'
          },
          itemStyle: {
            color: function (params) {
              return ['#1860d0', '#45c761', '#1bd8bb', '#8ad10c', ][params.dataIndex];
            }
          },
        }
      });
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.renderChart();
    });
  }
}
</script>

<style lang="scss" scoped>
.module{
  display: flex;
  flex-direction: column;
  .chart-container{
    display: flex;
    flex: 1;
    .chart-wrap{
      flex: 1;
    }
    .chart-legend{
      padding-left: rem(20);
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-right: rem(10);
    }
  }
}
</style>
